<template>
  <!-- 案例类型 -->
  <basic-container>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="always" class="top-wrap bg1">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="left-style">待诊断</div>
              <div class="left-name">{{ count2 }} </div>
            </el-col>
            <el-col :span="12">
              <div class="right-style">
                <el-image :src="url"></el-image>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="top-wrap bg2">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="left-style">待检查</div>
              <div class="left-name">{{ count1 }} </div>
            </el-col>
            <el-col :span="12">
              <div class="right-style">
                <el-image :src="url"></el-image>
              </div>
            </el-col>
          </el-row></el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="top-wrap bg3">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="left-style">待复查</div>
              <div class="left-name">{{ count3 }} </div>
            </el-col>
            <el-col :span="12">
              <div class="right-style">
                <el-image :src="url"></el-image>
              </div>
            </el-col>
          </el-row></el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="top-wrap bg4">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="left-style">创建档案</div>
            </el-col>
            <el-col :span="12">
              <div class="right-add">
                <el-image @click="addDangan()" :src="addurl"></el-image>
              </div>
            </el-col>
          </el-row></el-card>
      </el-col>
    </el-row>
    <!-- 查询 -->
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" :label-width="0">
        <el-form-item>
          <el-input v-model="formInline.name" placeholder="请输入患者身份证号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="filterListByKey" icon="el-icon-search">搜索</el-button>
          <el-button  @click="clearFilterKey" icon="el-icon-delete">清空</el-button>
        </el-form-item>
      </el-form>
     </div>
     <!-- 患者信息 -->
     <div v-if="flag" class="mainClass">
      <el-row :gutter="20">
        <el-col :span="6">
         患者姓名： {{ mainInfo.name }}
        </el-col>
        <el-col :span="6">
         患者性别： {{ mainInfo.sex === 0 ? '男' : '女'}}
        </el-col>
        <el-col :span="6">
         出生日期: {{ mainInfo.birthday }}
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
         年龄: {{ mainInfo.age }}
        </el-col>
        <el-col :span="6">
         建档时间: {{ mainInfo.createTime }}
        </el-col>
        <el-col :span="6">
         常住地址: {{ mainInfo.address }}
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
         状态: {{ mainInfo.status | filterStatus }}
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleAdd" size="small">查看患者档案</el-button>
        </el-col>
      </el-row>
     </div>
     <!-- 诊断历史 -->
    <div class="report-table">
       <el-table
       border
       size="small"
       :data="tableData"
       :style="{height: tableHeight + 'px','overflow': 'auto'}">
       <el-table-column
         label="#"
         type="index"
         width="50">
       </el-table-column>
       <el-table-column
         prop="name"
         label="患者姓名">
       </el-table-column>
       <el-table-column
         prop="idCard"
         label="身份证号">
       </el-table-column>
       <el-table-column
          prop="createTime"
          width="150"
          label="诊断时间">
        </el-table-column>
        <el-table-column
          prop="doctorName"
          label="诊断医生">
        </el-table-column>
        <el-table-column
          prop="diagnosticResult"
          label="诊断结果">
        </el-table-column>
       <el-table-column
         width="160"
         label="操作">
         <template slot-scope="scope">
           <span @click="handleEdit(scope.row)" class="oper">
            患者档案
           </span>
         </template>
       </el-table-column>
     </el-table>
     </div>
     <div class="report-bottom">
         <el-pagination
           background
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage"
           :page-sizes="[10, 20, 30, 40, 50, 100]"
           :page-size="pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total">
       </el-pagination>
     </div>
    <!-- 编辑 -->
    <edit ref="edit" title="编辑问诊记录" 
      :currentNode="currentNode" 
      :patientId="patientId" 
      @getDiagnosticListFun="getDiagnosticListFun">
    </edit>
    <!-- 新增 -->
    <add ref="add" title="新增问诊记录" 
      :currentNode="currentNode" 
      :patientId="patientId" 
      @getDiagnosticListFun="getDiagnosticListFun">
    </add>
 </basic-container>
</template>
<script>
import { getCountByStatus, getDiagnosticPatient , getHistoricalRecord} from "@/api/infoManagement/patientFile";
import { mapGetters } from "vuex";
import edit from '../infoManagement/patientFile/inquiryEdit.vue'
import add from '../infoManagement/patientFile/inquiryAdd.vue'
export default {
  data() {
    return {
      count1: 0,
      count2: 0,
      count3: 0,
      count4: 0,
      count5: 0,
      url: '/img/indexicon.png',
      addurl: '/img/add2.png',
      form: {},
      query: {},
      loading: true,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      viewbtn: false,
      selectionList: [],
      data: [],
      tableData: [],
      formInline: {
        name: '',
        idCard: ''
      },
      tableHeight: 280,
      mainInfo: {
        idCard: '',
        name: ''
      },
      flag: false,
      currentNode: '',
      patientId: ''
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      // this.viewbtn = true
      // this.viewbtn = this.vaildData(this.permission.device_view, false)
      return {
        viewbtn: true
        // addBtn: this.vaildData(this.permission.post_add, false),
        // viewBtn: this.vaildData(this.permission.post_view, false),
        // delBtn: this.vaildData(this.permission.post_delete, false),
        // editBtn: this.vaildData(this.permission.post_edit, false)
      };
    }
  },
  components: {edit, add},
  filters: {
    filterStatus(val) {
      let name = ''
      if (val == 1) {
        name = '待检查'
      } else if (val == 2) {
        name = '待诊断'
      } else if (val == 3) {
        name = '待复查'
      } else if (val == 4) {
        name = '康复中'
      } else if (val == 5) {
        name = '已康复'
      }
      return name
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    getCountByStatus(1).then((res) => {
      const data = res.data.data
      this.count1 = data
    })
    getCountByStatus(2).then((res) => {
      const data = res.data.data
      this.count2 = data
    })
    getCountByStatus(3).then((res) => {
      const data = res.data.data
      this.count3 = data
    })
    getCountByStatus(4).then((res) => {
      const data = res.data.data
      this.count4 = data
    })
    getCountByStatus(5).then((res) => {
      const data = res.data.data
      this.count5 = data
    })
  },
  methods: {
    // 搜索
    filterListByKey() {
      this.page = 1
      this.getDiagnosticPatientFun()
    },
    // 清空
    clearFilterKey() {
      this.formInline = {
        name: '',
      }
      this.mainInfo = {
        idCard: '',
        name: ''
      }
      this.page = 1
      this.flag = false
      this.patientId = ''
      this.currentNode = ''
      this.getList()
    },
    // 获取患者基本信息
    getDiagnosticPatientFun () {
      let params = {
        current: this.currentPage,
        parameter: this.formInline.name,
        size: this.pageSize
      }
      getDiagnosticPatient(params)
       .then (response => {
        this.flag = true
        this.patientId = response.data.data.records[0].id
        this.mainInfo = response.data.data.records[0]
        this.page = 1
        this.getList()
       })
    },
    // 获取列表
    getList () {
      let params = {
        current: this.currentPage,
        idCard: this.mainInfo.idCard,
        name: this.mainInfo.name,
        size: this.pageSize
      }
      getHistoricalRecord(params)
       .then(response => {
        this.tableData = response.data.data.records
        this.total = response.data.data.total
       })
    },
    // 添加问诊
    handleAdd() {
      // this.currentNode = ''
      // this.$refs.add.dialogFormVisible = true
      this.$router.push({
        path: '/patientFile/detail',
        query: {
          id: this.patientId,
          title: '档案详情'
        }
      })
    },
    // 编辑
    handleEdit(data) {
      // this.currentNode = data.id
      // this.$refs.edit.dialogFormVisible = true
      this.$router.push({
        path: '/patientFile/detail',
        query: {
          id: data.patientId,
          title: '档案详情'
        }
      })
    },
    // 更新回调
    getDiagnosticListFun () {
      this.page = 1
      this.getList()
    },
    // 分页
    handleSizeChange (val) {
      this.pageSize = val
      this.page = 1
      this.getList()
    },
    // 当前页
    handleCurrentChange (val) {
      this.currentPage = val
      this.getList()
    },
    // 创建档案
    addDangan() {
      this.$router.push({
        path: '/patientFile/add',
      })
    },
  }
};
</script>

<style scoped>
.top-wrap {
  position: relative;
  width: 100%;
  height: 125px;
  color: #fffFFF;
}

.bg1 {
  background-color: #4acf5a;
}

.bg2 {
  background-color: #ffbd44;
}

.bg3 {
  background-color: #4a91cf;
}

.bg4 {
  background-color: #8f4acf;

}

.left-style {
  font-size: 22px;
}

.left-name {
  font-size: 28px;
  text-align: center;
  padding: 10px;
}

.right-style {
  width: 70px;
  height: 70px;
  padding: 10px 30px;
}

.right-add {
  width: 80px;
  height: 80px;
  cursor: pointer;
}
.oper {
 display: inline-block;
 width: 50px;
 height: 20px;
 color: #409EFF;
 margin-right: 10px;
 cursor: pointer;
}
.mainClass {
  width: 98%;
  border: 1px solid #EBEEF5;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.report-bottom {
  margin-bottom: 20px;
}
</style>
